import _ from 'lodash';
import { nanoid } from 'nanoid';
import React from 'react';
import './index.less';

const DocExplain: React.FC<any> = (props: any) => {
  const { data, agoLogs, setAgoLogs, scrollToBottom } = props;
  const showExplain = (exdata: any) => {
    //判断ago里的type = "docExplainIntro" 并且 data.writing_struct_name =item.writing_struct_name 不包含则添加
    const hasExplain = agoLogs.find((item: any) => {
      return (
        item.type === 'docExplainIntro' &&
        item.data.writing_struct_name === exdata.writing_struct_name
      );
    });
    if (!hasExplain) {
      const explainTip = {
        key: nanoid(),
        className: `explain-${_.random(100000, 999999)}`,
        type: 'docExplainIntro',
        data: exdata,
      };
      setAgoLogs([...agoLogs, explainTip]);
      setTimeout(() => {
        scrollToBottom(`.${explainTip.className}`, 10);
      }, 200);
    } else {
      scrollToBottom(`.${hasExplain.className}`, 10);
    }
  };
  return (
    <div className=" explainBox">
      {data &&
        data.length > 0 &&
        data.map((item: any, index: number) => {
          return (
            <div key={item.id} className="explainList">
              <div className="explainList-hd">写作思路{index + 1}</div>
              <div className="explainList-bd" onClick={() => showExplain(item)}>
                什么是{item.writing_struct_name}
              </div>
            </div>
          );
        })}
    </div>
  );
};
export default DocExplain;
